 <!--
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  --> <!-- //tab -->
  <div class="ddp-wrap-tab-contents">
    <!-- 멤버 tab contents -->
    <div class="ddp-ui-tab-contents" style="display:block;">
      <!-- left -->
      <div class="ddp-ui-left">
        <div class="ddp-wrap-switch">
          <!-- 검색 -->
          <div class="ddp-form-search">
            <em class="ddp-icon-search"></em>
            <input type="text" placeholder="{{ searchPlaceholder | translate}}" (keypress)="onSearchText($event)"
                   (keyup.esc)="onSearchTextInit()"
                   [ngModel]="searchKeyword">
            <em class="ddp-btn-search-close" *ngIf="searchKeyword" (click)="onSearchTextInit()"></em>
          </div>
          <!-- //검색 -->
        </div>

        <!-- member -->
        <div class="ddp-ui-member">
          <ul class="ddp-list-checktype">
            <li class="ddp-all">
              <label class="ddp-label-checkbox" (click)="checkAll()">
                <input type="checkbox" [checked]="isCheckAll()">
                <i class="ddp-icon-checkbox"></i>
                <span class="ddp-txt-checkbox">{{'msg.comm.ui.list.all' | translate}} ({{allList.length}}/{{pageResult.totalElements}})</span>
              </label>
            </li>
            <li *ngFor="let item of allList">
              <label class="ddp-label-checkbox" (click)="checkItem(item)">
                <input type="checkbox" [checked]="isSelected(item)">
                <i class="ddp-icon-checkbox"></i>
                <span class="ddp-txt-checkbox">{{item.directoryName}} <span *ngIf="defaultTab===0">({{item.directoryId}})</span></span>
              </label>
            </li>
          </ul>
        </div>
        <!-- //member -->
        <!-- 더보기 -->
        <div class="ddp-ui-moretype" *ngIf="isLoadMoreItems()">
          <a href="javascript:" class="ddp-btn-moretype" (click)="onClickLoadMoreItems()">{{'msg.groups.btn.update.more' | translate}}</a>
        </div>
        <!-- //더보기 -->
      </div>
      <!-- //left -->
      <!-- right -->
      <div class="ddp-ui-right ddp-wrap-member-table">
        <!-- 그룹 -->
        <div class="ddp-ui-member-table">

          <span class="ddp-data-total2">{{'msg.permission.ui.sel.count' | translate : { value : selectedItems.length} }}</span>
          <div class="ddp-box-viewtable2 ddp-user">
            <!-- head -->
            <div class="ddp-ui-gridhead2">
              <table class="ddp-table-form2">
                <colgroup class="table-colgroup">
                </colgroup>
                <thead >
                <tr>
                  <th *ngFor="let item of headers">
                    {{item.name}}
                  </th>
                </tr>
                </thead>

              </table>
            </div>
            <!-- //head -->
            <!-- body -->
            <div class="ddp-ui-gridbody2">
              <table class="ddp-table-form2 ddp-long">
                <colgroup class="table-colgroup">
                </colgroup>
                <tbody>
                <tr *ngFor="let item of getSelectedList()">
                  <td *ngFor="let data of headers" [ngClass]="{'ddp-table-icons' : item[data.key]=== ''}">
                    <div class="ddp-ui-photo" *ngIf="data.name === 'Username'">
                      <img [src]="getUserImage(item)" class="ddp-data-photo">
                      <span>{{ item[data.key] }}</span>
                    </div>
                    <div *ngIf="data.name !== 'Username'">{{ item[data.key] }}</div>
                    <em class="ddp-icon-sclose" *ngIf="data.key=== ''" (click)="checkItem(item)"></em>
                  </td>
                </tr>
                </tbody>
              </table>

            </div>
            <!-- //body -->
          </div>
          <!-- 더보기 -->
          <div class="ddp-ui-moretype" *ngIf="isLoadMoreSelectedItems()">
            <a href="javascript:" class="ddp-btn-moretype" (click)="onClickLoadMoreSelectedItems()">{{'msg.groups.btn.update.more' | translate}}</a>
          </div>
          <!-- //더보기 -->
        </div>
        <!-- //그룹 -->
      </div>
      <!-- right -->
    </div>
  </div>
